<template>
  <div class="dialog">
    <!-- 这里的内容写死，就不灵活了，可以用一个占位符来占位 -->
    <!-- 父组件在使用子组件的时候，给子组件传递结构，传递什么结构，就展示什么结构 -->
    <!-- 这个占位符叫插槽 -->

  <!-- 第1个插槽，用于接收标题，如果父组件没有传递，就会用子组件里的 -->
   <slot name="title"><h3>添加</h3></slot><hr>
   <!-- 第2个插槽，用于接收对话框的内容 -->
   <slot name="content" uname="lisisi" age="20"></slot><hr>
   <!-- 第3个插槽，用于接收按钮(没有指定name的插槽，它的name="default") -->
   <slot ></slot>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
  .dialog{
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 5px;
  }
</style>